<template>
  <div class="box">
    <div class="Arrow_left_long">
      <b class="Vector10">←</b>
    </div>
    <div class="login">Log in</div>
    <div class="Rectangle">
      <div class="google1">
        <div class="Google">Google</div>
      </div>
    </div>
    <div class="Rectangle2">
      <div class="google2">
        <div class="Google2">Facebook</div>
      </div>
    </div>
    <div class="text">Or log in using</div>
    <div class="Rectangle4">
      <div class="mail">Mail</div>
    </div>
    <div class="Rectangle6">
      <div class="Password">Password</div>
      <div class="Ellipse">
        <img alt="Vue logo" src="../assets/Vector 132.png" />
      </div>
    </div>
    <div class="Forgot">Forgot your password?</div>
    <div class="Rectangle9">
      <div class="textt" @click="goLogin">Log in</div>
    </div>
    <div class="bot">Don’t have an account yet? <span class="identical" @click='goSign'>Sign up</span></div>
    <div class="Indicator"></div>
  </div>
</template>

<script>
export default {
  methods: {
    goLogin() {
      localStorage.setItem("token", "666");
      // 跳转拦截的路由
      this.$router.push("/index");
    },
    goSign() {
      this.$router.push("/sign");
    },
  },
};
</script>

<style lang="scss" scoped>
.Indicator {
  position: absolute;
  width: 134px;
  height: 5px;
  left: calc(50% - 134px / 2);
  bottom: 8px;

  /* black */
  background: #000000;
  border-radius: 100px;
}
.bot {
  position: absolute;
  width: 175px;
  height: 14px;
  left: 120px;
  top: 750px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  /* identical to box height */
  text-align: center;
  letter-spacing: -0.3px;

  color: #000000;
  span{
	  color:#00cec9; 
  }
}
.textt {
  position: absolute;
  width: 57px;
  height: 24px;
  left: 154px;
  top: 15px;

  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height */
  text-align: center;
  letter-spacing: -0.3px;

  color: #ffffff;
}
.Rectangle9 {
  position: absolute;
  width: 354px;
  height: 50px;
  left: 30px;
  top: 528px;

  background: #00cec9;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
}
.Forgot {
  position: absolute;
  width: 116px;
  height: 14px;
  left: 268px;
  top: 482px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  /* identical to box height */
  text-align: center;
  letter-spacing: -0.3px;

  color: #000000;
}
.Ellipse {
  position: absolute;
  left: 83.33%;
  right: 33.33%;
  top: 43.33%;
  bottom: 33.33%;

  // background: #00CEC9;
}
.Password {
  position: absolute;
  width: 56px;
  height: 15px;
  left: 74px;
  top: 20px;

  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
  /* identical to box height */
  letter-spacing: -0.3px;

  color: rgba(0, 0, 0, 0.5);
}
.Rectangle6 {
  position: absolute;
  width: 354px;
  height: 50px;
  left: 30px;
  top: 412px;

  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
}
.mail {
  position: absolute;
  width: 25px;
  height: 15px;
  left: 74px;
  top: 20px;

  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
  /* identical to box height */
  letter-spacing: -0.3px;

  color: rgba(0, 0, 0, 0.5);
}
.Rectangle4 {
  position: absolute;
  width: 354px;
  height: 50px;
  left: 30px;
  top: 342px;

  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
}
.text {
  position: absolute;
  width: 73px;
  height: 14px;
  left: 171px;
  top: 291px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  /* identical to box height */
  text-align: center;
  letter-spacing: -0.3px;

  color: #000000;
}
.Google2 {
  position: absolute;
  width: 75px;
  height: 18px;
  left: 30px;
  top: 7px;

  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.3px;

  color: #ffffff;
}
.Rectangle2 {
  position: absolute;
  left: 52.42%;
  right: 7.25%;
  top: 22.77%;
  bottom: 71.65%;

  background: #3498db;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
}
.Google {
  position: absolute;
  width: 55px;
  height: 18px;
  left: 55px;
  top: 7px;

  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.3px;

  color: #000000;
}

.box {
  width: 100%;
  height: 100%;

  .Arrow_left_long {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 31px;
    top: 65px;
    .Vector9 {
      position: absolute;
      left: 29.17%;
      right: 12.5%;
      top: 50%;
      bottom: 50%;
      border: 2px solid #000000;
      box-sizing: border-box;
      border-radius: 2px;
    }
    .Vector10 {
      position: absolute;
      left: 8.33%;
      right: 62.5%;
      top: 10%;
      bottom: 29.17%;
      font-size: 25px;
      // background: #000000;
    }
  }
  .login {
    /* Log in */

    position: absolute;
    width: 98px;
    height: 45px;
    left: 30px;
    top: 128px;

    font-family: Poppins;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 45px;
    /* identical to box height */
    text-align: center;
    letter-spacing: -0.3px;

    color: #000000;
  }
  .Rectangle {
    position: absolute;
    left: 7.25%;
    right: 52.42%;
    top: 22.77%;
    bottom: 71.65%;

    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
  }
}

.google1 {
  position: absolute;
  width: 33px;
  height: 33px;
  left: 20px;
  top: 10px;
  background: url("../assets/google icon 1.png");
}
.google2 {
  position: absolute;
  width: 33px;
  height: 33px;
  left: 20px;
  top: 10px;
  background: url("../assets/Vector.png") no-repeat;
}
</style>